<template>
  <div class="container-width app-container">
    <courseSelect class="select" @select="sortSelect" :sorts="tabs" :getFromStore="false"></courseSelect>

    <el-row type="flex" style="flex-wrap: wrap">
      <el-col
        :span="5"
        :offset="index % 4 ? 1 : 0"
        v-for="(item, index) in actives"
        :key="`active_${index}`"
      >

        <activityItem
          @signUp="signUp"

          :activeIndex="index"
          :activeItem="item"
        ></activityItem>
        <!-- @click="detail(item)" -->
        
      </el-col>
    </el-row>
    <el-empty v-if="actives.length<=0"></el-empty>
 <el-pagination
      class="pagination"
      @current-change="getActivityList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

   <signUp :activeId="chooseActiveId" :callback="signUpSuccess" v-model="dlg"></signUp>

  </div>
</template>

<script lang="ts" >
import courseSelect from "../course/courseSelect.vue";
import activityItem from "/@/components/activityItem.vue";
import signUp from '/@/components/signUpActivityDlg.vue'
import { activityList } from "/@/api/activityApi";
export default {
  components: {
    courseSelect,
    activityItem,
    signUp
  },
  data() {
    return {
      pageSize:20,
      total:0,
      tabs: [
     
        { label: "进行中", value: 99 },
        { label: "已结束", value: 98 },
      ],
      actives: [],
      dlg: false,
      
      chooseActiveId:'',
      chooseActiveIndex:null
    };
  },
  mounted(){
      this.getActivityList()
  },
  methods: {
    sortSelect(status){
        this.getActivityList(1,{status:status})
    },
    signUp(index) {
      this.chooseActiveId =this.actives[index].activityId
      this.dlg = true;
    },
    signUpSuccess(){
        this.dlg = false;
        this.getActivityList()
    },
    getActivityList(page = 1, params = {}) {
      let offset = (page - 1) * this.pageSize;
        activityList({
          offset: offset,
          size: this.pageSize,
          ...params,
        })
        .then((res) => {
          const { activityInfos, total } = res;
          this.actives = activityInfos|| [];
          //console.log(this.actives);
          this.total = total;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>

.form {
  width: 60%;
  margin: 0 auto;
}
.code {
  height: 40px;
  border-radius: 4px;
  width: 30%;
  border: 1px solid #ff5f19;
  color: #ff5f19;
  font-size: 16px;
  margin-left: 10px;
}

</style>